<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .computer {
            width: 40px;
            height: 30px;
        }

        .mine {
            width: 100px;
            height: 30px;
            background: pink;
        }
    </style>
</head>

<body>
    <!-- 画一个结构 -->
    <div class="box">
        <p>电脑：</p>
        <div class="computer">✊</div>
        <p>我出：</p>
        <div class="mine">
            <button>✊</button>
            <button>✌</button>
            <button>🖐</button>

        </div>
        <button class="start">再来一局</button>
        <div class="count">得分是：0</div>
    </div>


    <script>
        let z_computer = document.querySelector('.computer')
        let z_choice = document.querySelectorAll('.mine button')
        let z_count = document.querySelector('.count')
        let z_mine = document.querySelector('.mine')
        let z_start = document.querySelector('.start')
        let data = ['✊', '✌', '🖐']
        // 设置一个积分器并给初始值
        let count = 0


        game()
        function game() {
            // 最开始的时候会开启定时器
            let t = setInterval(time, 1000)
            // 设置一个flag,true表示你可以开启定时器，false就是不能开启
            let flag = false
            // 再来一局禁用
            z_start.disabled = true

            for (let i = 0; i < z_choice.length; i++) {
                z_choice[i].onclick = function () {
                    // 清除定时器
                    clearInterval(t)
                    flag = true
                    // 判断
                    pd(z_computer.innerHTML, this.innerHTML)

                    z_count.innerHTML = `得分是：${count}`


                    // 设置退出游戏
                    if (count < -1) {
                        flag = false
                        alert('退出游戏')
                        // 清除所有的事件
                        for (let i = 0; i < z_choice.length; i++) {
                            z_choice[i].onclick = null
                        }
                        z_mine.onmouseout = null
                        count = 0
                        z_count.innerHTML = `得分是：${count}`

                        z_start.disabled = false
                        z_start.onclick = function () {
                            game()
                        }
                    }
                }
            }




            // 重新开启定时器
            z_mine.onmouseout = function () {
                if (flag) {
                    flag = false
                    t = setInterval(time, 1000)
                }
            }


        }





        // 写一个定时器的函数
        function time() {
            // 随机生成数
            let x = parseInt(Math.random() * 3)
            z_computer.innerHTML = data[x]

            console.log('定时器开启')
        }

        // 判断输赢函数
        function pd(m, n) {
            switch (m) {
                case '✊':
                    switch (n) {
                        case '✊': alert('平局'); break;
                        case '✌': count--; alert('你输了'); break;
                        case '🖐': count++; alert('你赢了'); break;
                    }; break;
                case '✌':
                    switch (n) {
                        case '✌': alert('平局'); break;
                        case '🖐': count--; alert('你输了'); break;
                        case '✊': count++; alert('你赢了'); break;
                    }; break;
                case '🖐':
                    switch (n) {
                        case '🖐': alert('平局'); break;
                        case '✊': count--; alert('你输了'); break;
                        case '✌': count++; alert('你赢了'); break;
                    }; break;
            }
        }
    </script>
</body>

</html>